import { useRef, useState } from "react";
import type { ActionRefType } from "@alipay/techui-rule-tree";
import { RuleTree } from "@alipay/techui-rule-tree";
import type { FormInstance } from "antd";
import { Button, Divider, Form, Input, InputNumber, Space } from "antd";

export default function App() {
  const [value, setValue] = useState({});
  const formRef = useRef<FormInstance>();
  const actionRef = useRef<ActionRefType<{ name: string; age: number }>>();

  return (
    <div>
      <p>使用formRef来获取组件内部的form实例</p>
      <Space>
        <Button
          onClick={() => {
            console.log(formRef.current!.getFieldsValue());
          }}
        >
          submit
        </Button>
        <Button
          onClick={() => {
            console.log(formRef.current!.validateFields());
          }}
        >
          validate
        </Button>
        <Button
          onClick={() => {
            formRef.current!.setFieldValue(
              ["children", 0, "name"],
              "AAAAAAAAAAAaaaaa"
            );
            formRef.current!.validateFields();
          }}
        >
          setFieldValue
        </Button>
      </Space>
      <Divider />
      <p>使用actionRef做增删改查操作</p>
      <Space>
        <Button
          onClick={() => {
            actionRef.current!.add([]);
          }}
        >
          add
        </Button>
        <Button
          onClick={() => {
            actionRef.current!.remove([], 2);
          }}
        >
          remove
        </Button>
        <Button
          onClick={() => {
            console.log(actionRef.current!.get([]));
          }}
        >
          get
        </Button>
        <Button
          onClick={() => {
            actionRef.current!.addGroup([]);
          }}
        >
          addGroup
        </Button>
        <Button
          onClick={() => {
            actionRef.current!.addGroup(
              [],
              { relation: "||", children: [{ name: "a" }, { name: "b" }] },
              0
            );
          }}
        >
          addGroup (with default value)
        </Button>
      </Space>
      <RuleTree<{ name: string; age: number }>
        formRef={formRef}
        defaultRelationValue={"or"}
        actionRef={actionRef}
        onChange={(value) => {
          setValue(value);
        }}
        defaultValue={{
          relation: "and",
          children: [
            {
              name: "A",
            },
            {
              name: "B",
            },
          ],
        }}
      >
        {(field, index, action) => {
          return (
            <Space>
              <Form.Item
                noStyle
                name={[field.name, "name"]}
                rules={[
                  { required: true },
                  {
                    validator(rule, value) {
                      if (value?.length < 2) {
                        return Promise.reject("长度不应小于2");
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <Input
                  onChange={() => {
                    // console.log(formRef.current!.getFieldsValue())
                    const a = action.getCurrentRowData();
                    action.setCurrentRowData({
                      age: a.age ? a.age + 1 : 1,
                    });
                  }}
                />
              </Form.Item>
              <Form.Item noStyle name={[field.name, "age"]}>
                <InputNumber />
              </Form.Item>
            </Space>
          );
        }}
      </RuleTree>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}
